import React, { Component } from 'react';
import { Flex, TextareaItem, Radio, Toast } from 'antd-mobile';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import Img from '../../components/Img/Img';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import styles from './orderCancel.less'
import cns from 'classnames/bind'

const cx = cns.bind(styles)

class orderCancel extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isReceived: false,
            reason: ''
        }
    }

    componentDidMount(){
        this.props.dispatch({type: "orderList/OrderDetailEFF", obj: this.props.match.params.data});
    }

    // 申请退款
    handleRefund = () => {
        console.log(this.props)
        const { orderId, orderAmount, orderGoodsEntityList = [], orderSn } = this.props.orderList.orderDetail
        const { isReceived, reason } = this.state
        let obj = {
            id: orderId,
            orderSn: orderSn,
            receipt: isReceived ? 1 : 0,
            refundAmount: orderAmount,
            orderGoodsId: orderGoodsEntityList[0] ? orderGoodsEntityList[0].recId : ''
        }
        // 没有收到货时直接取消订单
        // 收到获取时需要跳转到售后页
        if (!isReceived) {
            Object.assign(obj, {
                buyerMessage: reason
            })
        } else {
            return this.props.dispatch({type: "orderList/CancleOrderEFF", obj: {orderSn: obj.orderSn, receipt: 1}}).then(res => {
            // return this.props.dispatch({type: "orderList/FinishOrderEFF", obj}).then(res => {
                if (res.code == 200) {
                    return this.props.dispatch(routerRedux.push({
                        pathname:`/EvaluateAndAfter/${orderId}/${1}`
                    }))
                } else {
                    Toast.fail(res.msg, 1.5);
                }
            });
        }
        console.log(obj)
        // this.props.dispatch({type:"orderList/refundEFF", obj: obj})
        this.props.dispatch({type: "orderList/CancleOrderEFF", obj: {orderSn: obj.orderSn, receipt: 0, reasonMessage: this.state.reason}})
        .then((result)=>{
            if(result.code==200){
                Toast.info(result.msg,1,()=>{
                    // this.props.dispatch(routerRedux.push({
                    //     pathname: `/orderList/${0}`,
                    // }));
                    this.props.dispatch(routerRedux.replace({
                        pathname:`/returnSuccess/${[result.ret.afterSaleId , result.ret.tiemStr, result.ret.afterSaleType ]}`
                        // pathname:`/afterSale`
                    }))
                    // if (isReceived) {
                    //     this.props.dispatch(routerRedux.replace({
                    //         pathname:`/returnSuccess/${[result.ret.id, result.ret.time, result.ret.type]}`
                    //         // pathname:`/afterSale`
                    //     }))
                    // } else {

                    // }
                });
            }else{
                Toast.fail(result.msg);
            }
        })
    }

    render() {
        const { isReceived, reason } = this.state
        const orderGoods = this.props.orderList.orderGoodsEntityList
        return (
            <Flex direction="column" style={{height: "100%", position: "relative"}}>
                <NavTopBar dispatch={this.props.dispatch} title="取消订单" ></NavTopBar>
                <MyScroll style={{height:"100%"}}>
                    <div className={cx('goods_pane')}>
                        {
                            orderGoods.map((item, index) => {
                                return (
                                    <div key={index} className={cx('goods_wrp')}>
                                        <div className={cx('img_wrp')}>
                                            <Img src={item.goodsImage} />
                                        </div>
                                        <div className={cx('goods_detail')}>
                                            <div>{item.goodsName}</div>
                                            <div style={{marginTop: '.4rem'}}>
                                                <span>数量: {item.goodsNum}</span>
                                                <span>价格: {item.goodsPayPrice}</span>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className={cx('received_wrp')}>
                        <div className={cx('title')}>是否已收到货</div>
                        <div className={cx('option')}>
                            <div style={{marginRight: '1.2rem'}}><Radio onChange={e => this.setState({isReceived: false})} checked={!isReceived} className={cx('my_radio')}>未收货</Radio></div>
                            <div><Radio onChange={e => this.setState({isReceived: true})} checked={isReceived} className={cx('my_radio')}>已收货</Radio></div>
                        </div>
                    </div>
                    {/* 已收货 */}
                    {
                        this.state.isReceived &&
                        <div style={{width: '100%'}}>
                            <div className={cx('receive_tip')}>
                                选择已收货会将订单状态修改为已收货，再进行售后申请
                            </div>
                            <div onClick={this.handleRefund} className={cx('btn_cancel')}>申请退款</div>
                        </div>
                    }
                    {/* 未收货 */}
                    {
                        !this.state.isReceived &&
                        <div style={{width: '100%'}}>
                            <div className={cx('reason_wrp')}>
                                <div className={cx('title')}>退款原因</div>
                                <div className={cx('textarea_wrp')}>
                                    <TextareaItem
                                        value={reason}
                                        onChange={val => this.setState({reason: val})}
                                        count={150}
                                        rows={5}
                                        placeholder="多行输入"
                                    />
                                </div>
                            </div>
                            <div className={cx('unreceive_wrp')}>
                                <p>您的商品已出库，订单拦截可能不成功</p>
                                <p>您可到订单详情页关注最新进展</p>
                            </div>
                            <div onClick={this.handleRefund} className={cx('btn_cancel')}>申请退款</div>
                        </div>
                    }
                </MyScroll>

            </Flex>
        )
    }
}

export default connect(({ orderList }) => ({ orderList }))(orderCancel);
